<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* 自定义样式 */
        .player-container {
            background-color: #f9f9f9;
            border-radius: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .podcast-cover {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

        .progress-bar {
            height: 4px;
            background-color: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: #FF6B6B;
            width: 0;
            transition: width 0.3s ease;
        }

        .control-button {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .control-button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <header class="bg-white p-4 shadow-md flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <button onclick="javascript:changePage1(1)" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                <i class="fa fa-arrow-left"></i>
            </button>
            <h1 class="text-xl font-bold">播放页</h1>
        </div>
        <button onclick="javascript:fenXiang()" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
            <i class="fa fa-share-alt"></i>
        </button>
    </header>
<div id="app3">
    <main class="p-4 space-y-6">
        <div class="player-container">
            
            <!-- https://images.unsplash.com/photo-1607720442477-81a3304142c3 -->
            <!--  -->
            <img :src="image" alt="播客封面" class="podcast-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold">
                    <!-- 商业洞察力：创新商业模式 -->
                    {{ title }}
                </h2>
                <p class="text-sm text-gray-600">
                    <!-- 主播：商业洞察团队 -->
                    {{ note }}
                </p>
                <p class="text-sm text-gray-400">
                    <div id="itxt1"></div>
                </p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-sm text-gray-600">
                        <!-- 0:00 {{ startNum }}-->
                        <span id="startNum1"></span>
                    </span>
                    <div class="flex-1 mx-2 progress-bar">
                        <div class="progress-fill" id="progress-fill"></div>
                    </div>
                    <span class="text-sm text-gray-600">
                        <!-- 58:00 {{ endNum }}-->
                        <span id="endNum1"></span>
                    </span>
                </div>
                <div class="flex items-center justify-center space-x-8 mt-6">
                    <button class="control-button">
                        <i class="fa fa-step-backward"></i>
                    </button>
                    <button id="btnPlay" class="control-button">
                        <i class="fa fa-play"></i>
                        <!-- <i v-show="showPlay" class="fa fa-play"></i>
                        <i v-show="showPause" class="fa fa-pause"></i> -->
                    </button>
                    <button class="control-button">
                        <i class="fa fa-step-forward"></i>
                    </button>
                    <button id="btnPause" class="control-button">
                        <i class="fa fa-pause"></i>
                    </button>
                </div>
                <div class="flex items-center justify-between mt-6">
                    <div class="flex items-center space-x-2">
                        <button @click="shouCang()" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                            <i class="fa fa-heart"></i>
                        </button>
                        <span class="text-sm text-gray-600">收藏</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button @click="dingYue()" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                            <i class="fa fa-download"></i>
                        </button>
                        <span class="text-sm text-gray-600">订阅</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                            <i class="fa fa-volume-up"></i>
                        </button>
                        <input type="range" class="w-20" min="0" max="100" value="50">
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white p-4 shadow-md rounded-md">
            <h2 class="text-lg font-bold">播客介绍</h2>
            <p class="text-sm text-gray-600">
            <!-- 本播客深入探讨全球商业趋势与案例分析，为您带来最新的商业动态和创新商业模式的解读。主播团队由资深商业分析师组成，他们凭借丰富的行业经验和敏锐的洞察力，为您呈现一场精彩的商业盛宴。 -->
            {{content}}
            </p>
        </div>

        <div class="bg-white p-4 shadow-md rounded-md">
            <h2 class="text-lg font-bold">相关推荐</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">

            <div v-for="(item2,index) in tuiJianList" :key="index">
                <div class="podcast-card"> 
                    <img :src="item2.picData" alt="播客封面" class="w-full h-32 rounded-image">
                    <div class="p-2">
                        <h3 class="text-sm font-bold">
                            <!-- 科技早知道 -->
                            {{ item2.title }}
                        </h3>
                        <p class="text-xs text-gray-600">
                            <!-- 每日科技新闻深度解读 -->
                            {{ item2.content }}
                        </p>
                    </div>
                </div>
            </div>
<!-- 
                <div class="podcast-card"> 
                    https://images.unsplash.com/photo-1615373344784-321d890000b3
                    <img src="https://images.unsplash.com/photo-1726064855961-f2feebc23b66?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="播客封面" class="w-full h-32 rounded-image">
                    <div class="p-2">
                        <h3 class="text-sm font-bold">科技早知道</h3>
                        <p class="text-xs text-gray-600">每日科技新闻深度解读</p>
                    </div>
                </div>
                <div class="podcast-card">
                    https://images.unsplash.com/photo-1607720442477-81a3304142c3
                    <img src="https://plus.unsplash.com/premium_photo-1739413060969-c830c2d1955b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="播客封面" class="w-full h-32 rounded-image">
                    <div class="p-2">
                        <h3 class="text-sm font-bold">文化漫谈</h3>
                        <p class="text-xs text-gray-600">探索多元文化魅力</p>
                    </div>
                </div>
 -->

            </div>

            <br>
        </div>
        <br>
    </main>
</div>
</body>
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
<script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
<!-- <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> 
<script src="kit.js"></script>-->
<script>



    $(function(){
        console.log("player page start"); 

        $(document).ready(function() {
            console.log("page ready!")
            $('#btnPause').click(function() {
                console.log("btnPause 点击暂停了")
                voiceResume();
                // synth.resume();
            });
            $('#btnPlay').click(function() {
                console.log("btnPlay 点击开始了")
                voicePlay();
                // synth.pause();
            });
        });

    })

    function fenXiang(){
        alert('还没有实现')
    }


    function voiceResume(){
        console.log("voiceResume()")
        synth.pause();
    }

    function voicePlay(){
        console.log("voicePlay()")
        synth.resume();
    }


    var msg1 = new SpeechSynthesisUtterance();
    const synth = window.speechSynthesis;

    // 模拟进度条更新
    const progressFill = document.getElementById('progress-fill');
    // console.log('progressFill==null')
    // console.log(progressFill==null)
    let currentProgress = 0;
    const interval = setInterval(() => {
        //console.log("1,currentProgress-=>",currentProgress)
        if (currentProgress < 100) {
            //console.log("2,currentProgress-=>",currentProgress)
            currentProgress++;
            progressFill.style.width = `${currentProgress}%`;
            //progressFill.style.width = '50px'
            //progressFill.width = '50px'
            //$('#progress-fill').css('width',currentProgress+'%')
            //console.log("3,currentProgress-=>",currentProgress)
        } else {
            clearInterval(interval);
        }
    }, 1000);


    function changePage1(e){
        //window.parent.postMessage('Hello from iframe','http://localhost:88/');
        window.parent.changePage(1)
    }

    new Vue({
        el:'#app3',
        data(){
            return{
                msg: 'abc',
                id: 0,
                image: 'https://plus.unsplash.com/premium_photo-1722111091429-dd3dc55979d3',
                title: '博主的投资领路人-将将篇',
                note: '说说将将大佬，对我的投资印象',
                content: '主要讲讲博主的投资经验，博主在投资路上遇到的人，和指导投资，和部分经历的分享。',
                endNum: 100,
                startNum: 0,
                showPlay: false,
                showPause: false,
                msg1: null,
                synth: null,
                user_uId:'',
                tuiJianList:[],
                storyList:[]
            }
        },
        created(){
            console.log("created()")
            this.showPlay = true;
        },
        mounted(){
            console.log("mounted()")

            this.initData();
            this.initTuiJieData();
        },
        methods:{
            one(){
                console.log("one()")

            },
            shouCang(){

                $.ajax({
                    type:'GET',
                    url:'./player1.php',
                    data:{"user_uId":this.user_uId,"id":this.id,"souc":"1"},
                    success:function(res){
                      console.log(res);
                    },
                    timeout:2000,
                    error:function(e){
                      console.log(e);
                    }
                })  
            },
            dingYue(){

            },
            initData(){
                console.log("initData()")
                let _that = this
                let playId1 = sessionStorage.getItem("playId"); 
                let itemCont = sessionStorage.getItem("itemCont");
                this.user_uId = sessionStorage.getItem("user_uId");
                let obj1 = JSON.parse(itemCont);
                console.log("obj1-=>",obj1)
                this.id = obj1.id
                this.title = obj1.title
                this.content = obj1.remark2
                this.note = obj1.content
                this.image = obj1.picData

                var url1 = obj1.remark1

                $.ajax({
                    type:'GET',
                    url:'./'+url1,
                    data: {},
                    success:function(res){
                      console.log(res.storys);
                      _that.storyList = res.storys
                      _that.showStory()
                    },
                    timeout:2000,
                    error:function(e){
                      console.log(e);
                    }
                })

            },
            initTuiJieData(){
                console.log("initTuiJieData()")
                let _that = this;

                $.ajax({
                    type:'GET',
                    url:'./player1.php',
                    data: {"tuijie":"abc"},
                    success:function(res){
                      console.log(res);
                      var arr1 = JSON.parse(res);
                      let arr2 = [];
                      for(item1 of arr1){
                        console.log("item1-=>",JSON.stringify(item1))

                        if(_that.id == item1.id){}else{
                            arr2.push(item1)
                        }

                      }
                      console.log("arr2-=>",arr2)
                      _that.showTuiJie(arr2);

                    },
                    timeout:2000,
                    error:function(e){
                      console.log(e);
                    }
                })


            },
            showTuiJie(arr2){
                console.log("arr2-=>",arr2);
                this.tuiJianList = arr2;
            },
            showStory(){
                console.log("storyList-=>",this.storyList)

                if(this.storyList.length>0){
                    this.startVoice()
                }
            },
            startVoice(){
                console.log("startVoice()")
                this.voiceSetUp();

                this.startSpeak(0); 

                let user_id2 = "";

                $.ajax({
                    type:'GET',
                    url:'./player1.php',
                    data:{"user_uId":this.user_uId,"id":this.id,"bofaSu":"1"},
                    success:function(res){
                      console.log(res);
                    },
                    timeout:2000,
                    error:function(e){
                      console.log(e);
                    }
                })  

            },
            voiceSetUp(){
                msg1 = new SpeechSynthesisUtterance();
                msg1.lang = 'zh-CN'; // 设置语言为英语（美国）
                msg1.rate = 1;       // 语速，1为正常速度
                msg1.pitch = 1;      // 音高，1为正常音高
                msg1.volume = 0.3;     // 音量，1为正常音量
            },
            startSpeak(i){
                let _that = this
                console.log("startSpeak()",i)
                let num2 = this.storyList.length;
                $("#endNum1").text(''+num2);
                $("#startNum1").text(''+i);
                let baif1 = (i / this.storyList.length) * 100;
                $('#progress-fill').css('width',baif1+'%')
                console.log("-=>",this.storyList[i])
                msg1.text = this.storyList[i];
                $('#itxt1').text(this.storyList[i])
                // speechSynthesis.speak(msg1); 
                synth.speak(msg1);
                msg1.onend = function(event) {
                    i+=1;
                    console.log('朗读完成-=>',i);
                    if(i == _that.storyList.length){}else{
                        _that.startSpeak(i);  
                    }       
                };
            }
        }
    })

/*
data:img/jpg;base64,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
*/

</script>
</html>